<template>
  <div class="search">
    <div class="city">{{ city }}</div>
    <van-search
      v-model="value"
      placeholder="请输入地址"
      id="input-search"
      @update:model-value="handlePlaceSearch"
      @search="handlePlaceSearch"
    />
  </div>
  <div id="map-container">
    <div class="map-pois">
      <van-radio-group v-model="defaultCheck">
        <van-cell-group inset v-for="item in poisList" :key="item.id">
          <van-cell :title="item.name" clickable @click="handleChecked(item)">
            <template #right-icon>
              <van-radio :name="item.id" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- <div v-for="item in poisList" :key="item.id" class="pois-item">
        <div class="item-name">{{ item.name }}</div>
        <input type="radio" v-model="checked" />
      </div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onUnmounted, onMounted } from 'vue'
import useMap from '@/hooks/useMap'
defineProps<{
  detail: string
}>()
const emits = defineEmits<{
  (e: 'select', value: string): void
}>()
// 地图初始化
let map: AMap.Map | null = null
const { city, adcode, defaultCheck, poisList, loadMap, handleGeoLocation } = useMap()
const initMap = async () => {
  try {
    await loadMap()
    const AMap = window.AMap // 这里假设loadMap加载成功后，AMap对象会挂载到window上，实际根据具体情况调整获取方式
    map = new AMap.Map('map-container', {
      viewMode: '2D',
      zoom: 21,
    })
    handleGeoLocation()
  } catch (e) {
    console.log('地图初始化或地理定位过程出现错误:', e)
  }
}
// 搜索关键字
const value = ref('')
// POI搜索
const handlePlaceSearch = () => {
  const autoOptions = {
    //city 限定城市，默认全国
    city: adcode.value || '全国',
    input: 'input-search', //"input_id"替换为输入框实际 id
    datatype: 'poi',
  }
  //实例化AutoComplete
  const autoComplete = new (AMap as any).AutoComplete(autoOptions)
  // 创建PlaceSearch对象
  const placeSearch = new (AMap as any).PlaceSearch({
    pageSize: 5, // 单页显示结果条数
    pageIndex: 1, // 页码
    city: adcode.value ? adcode.value : '全国', // 兴趣点城市
    citylimit: true, // 是否强制限制在设置的城市内搜索
    map: map, // 展现结果的地图实例
    panel: 'panel', // 结果列表将在此容器中进行展示。
  })
  autoComplete.on('select', function (e: { poi: { name: any } }) {
    //针对选中的poi实现自己的功能
    placeSearch.search(e.poi.name)
  })
}
const handleChecked = (item: { id: string; name: string }) => {
  defaultCheck.value = item.id
  emits('select', item.name)
}
onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (map) {
    map.destroy()
  }
})
</script>
<style scoped lang="scss">
::v-deep() {
  .van-search__content {
    border-radius: var(--van-radius-lg);
  }
}
.map-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.search {
  height: 30px;
  background: var(--box-background);
  display: flex;
  align-items: center;
  padding: 10px;
}
.van-search {
  flex: 1;
  padding: 0;
  padding-left: 10px;
}
:deep() {
  .van-search__content {
    border-radius: 20px;
  }
}
#map-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.map-pois {
  z-index: 1;
  height: 300px;
  overflow-y: scroll;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 10px;
  border-radius: 10px;
  background: var(--box-background);
}
.pois-item {
  height: 40px;
  display: flex;
  align-items: center;
}
</style>
